<template>
  <el-dialog
    custom-class="sc-dialog"
    :title="$t('Content.SaveFolderDlg.title')"
    :visible.sync="open"
    :close-on-click-modal="false"
    :append-to-body="true"
    @click.native.stop
  >
    <div class="dialog-container">
      <splitpanes :dbl-click-splitter="false">
        <pane class="pane sc-pr-16" :min-size="30" :size="40">
          <el-row
            class="sc-h-380 sc-text-center"
            type="flex"
            align="center"
            justify="center"
          >
            <!-- 需要测试竖图 -->
            <img
              class="sc-max-full"
              v-if="dialogInfo.imgBase64 || dialogInfo.imgUrl"
              :src="dialogInfo.imgBase64 || dialogInfo.imgUrl"
              @dragstart.prevent
            />
            <video
              v-if="dialogInfo.video"
              class="sc-max-full"
              controls="controls"
              @dragstart.prevent
            >
              <source :src="dialogInfo.video" type="video/webm" />
            </video>
          </el-row>
        </pane>
        <pane :min-size="40" :size="70" class="sc-pl-8">
          <el-tabs class="sc-popper-title-tab" v-model="activeTreeTab">
            <!-- 团队工作区 -->
            <el-tab-pane :name="labelTypeTeam" label="团队工作区">
              <SelectTree
                class="sc-h-300 sc-pa-8"
                :folderType="labelTypeTeam"
                :selectedFolder.sync="selectedFolderTeam"
              ></SelectTree>
            </el-tab-pane>
            <!-- 个人工作区 -->
            <el-tab-pane :name="labelTypePrivate" label="个人工作区">
              <SelectTree
                class="sc-h-300 sc-pa-8"
                :folderType="labelTypePrivate"
                :selectedFolder.sync="selectedFolderPrivate"
              ></SelectTree>
            </el-tab-pane>
          </el-tabs>
          <!-- 底部操作区域 -->
          <DialogFooter>
            <el-button class="sc-btn-medium sc-btn-ghost" @click="open = false">
              {{ $t("action.cancel") }}
            </el-button>
            <el-button
              class="sc-btn-medium"
              type="primary"
              @click="handleSubmit"
              :loading="isOperated"
              :disabled="!selectedFolderVm || selectedFolderVm.isDisabled"
            >
              {{ $t(`action.confirm`) }}
            </el-button>
          </DialogFooter>
        </pane>
      </splitpanes>
    </div>
  </el-dialog>
</template>

<script>
import { saveToBlueberryApi } from "@/contentUtils/utils";
import { mapState } from "vuex";

import { labelTypePrivate, labelTypeTeam } from "@/constant";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
//组件
import SelectTree from "./SelectTree.vue";

const DIALOG_KEY = "SaveFolderDlg";

export default {
  name: DIALOG_KEY,
  components: { SelectTree, Splitpanes, Pane },
  data() {
    return {
      isOperated: false,
      selectedFolderTeam: null,
      selectedFolderPrivate: null,
      activeTreeTab: labelTypeTeam,
      labelTypeTeam,
      labelTypePrivate
    };
  },
  computed: {
    ...mapState("orange", {
      dialogInfo: state => state.dialog[DIALOG_KEY]
    }),
    open: {
      get() {
        return !!this.$isOpen(DIALOG_KEY);
      },
      set(newValue) {
        if (newValue) {
          throw new Error("打开弹窗请直接使用 this.$openDialog");
        } else {
          this.$EventBus.$emit("close" + DIALOG_KEY, false);
          this.$closeDialog(DIALOG_KEY);
        }
      }
    },
    resFormData() {
      return this.formData;
    },
    selectedFolderVm() {
      if (this.activeTreeTab === this.labelTypeTeam) {
        return this.selectedFolderTeam;
      }
      return this.selectedFolderPrivate;
    }
  },
  methods: {
    async handleSubmit() {
      saveToBlueberryApi({
        url: this.dialogInfo.imgUrl,
        base64: this.dialogInfo.imgBase64 || this.dialogInfo.video,
        folder: this.selectedFolderVm
      });
      this.open = false;
    },
    /** 锁定异步事件，防止重复触发 */
    async lockAction(func) {
      this.isOperated = true;
      try {
        await func();
      } finally {
        this.isOperated = false;
      }
    }
  },
  created() {
    console.log(this.dialogInfo);
  },
  destroyed() {}
};
</script>

<style lang="scss" scoped>
.dialog-container {
}
</style>
